<template>
    <div class="app-container">
        <h2 style="display: flex">报销申请</h2>
        <!-- 条件查询 -->
        <el-form :inline="true" :model="query" size="small" style="display: flex">
            <el-form-item label="状态:">
                <el-select v-model="query.status" clearable placeholder="请选择">
                    <el-option v-for="item in processStatus" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button icon="el-icon-refresh"  @click="reload">重置</el-button>
            </el-form-item>
        </el-form>
        <div style="display: flex">
            <el-button icon="el-icon-plus" type="primary" size="small" @click="clickShowForm('新增')">新增申请</el-button>
            <el-button icon="el-icon-picture" type="primary" size="small" @click="showPic">流程图</el-button>
        </div>

        <el-dialog title="流程图展示" :visible.sync="pngDialogVisible" align="center" width="70%" >
            <el-image :src="url" >
                <div slot="placeholder">流程图加载中 <i class="el-icon-loading"></i></div>
            </el-image>
        </el-dialog>

        <br>

        <!-- stripe 带斑马纹 -->
        <el-table :data="list" stripe border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column  align="center" prop="username" label="报销人" min-width="90" ></el-table-column>
            <el-table-column  align="center" prop="money" label="报销金额" width="120" ></el-table-column>
            <el-table-column align="center" prop="loanDateStr" label="报销日期" width="160"></el-table-column>
            <el-table-column  align="center" prop="purpose" label="报销用途" min-width="160"></el-table-column>
            <el-table-column  align="center" prop="remark" label="备注" min-width="160"></el-table-column>
            <el-table-column  align="center" prop="statusStr" label="业务状态" width="90" >
                <template slot-scope="{row}">
                    <el-tag effect="plain">{{row.statusStr}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column  align="center" prop="createDateStr" label="创建日期" width="160"></el-table-column>
            <el-table-column  align="center" label="操作" fixed="right" width="220">
                <template slot-scope="{row}">
                    <!-- 0已撤回，1未提交，2处理中，3已完成 -->
                    <el-button v-if="row.status == 0 || row.status == 1" @click="clickShowForm('编辑', row)" type="text" >编辑</el-button>
                    <el-button v-if="row.status == 2 || row.status == 3 || row.status == 5" type="text" @click="clickShowForm('详情', row)">详情</el-button>
                    <el-button v-if="row.status == 2" @click="clickCancelProcess(row)" type="text" >撤回</el-button>
                    <el-button v-if="row.status == 0" @click="clickSubmitApply(row)" type="text" >重新申请</el-button>
                    <el-button v-if="row.status == 1" @click="clickSubmitApply(row)" type="text" >提交申请</el-button>
                    <el-button v-if="row.status == 2 || row.status == 3 || row.status == 4" @click="clickProcessHistory(row)" type="text" >审批历史</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="block" style="margin-top: 10px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!-- 请假表单 -->
        <el-dialog :title="operate" :visible.sync="formVisible" @close="closeForm(false)" width="1000px" destroy-on-close>
            <loan-form :operate="operate" :businessKey="row.id" @close="closeForm"></loan-form>
        </el-dialog>

        <!-- 提交申请 -->
        <submit-apply ref="sumbitApplyRef" :row="row"></submit-apply>

        <!-- 撤回申请 -->
        <cancel-apply ref="cancelRef" :businessKey="row.id" :procInstId="row.processInstanceId"></cancel-apply>

        <!-- 审批历史 -->
        <history ref="historyRef" :businessKey="row.id" :processInstanceId="row.processInstanceId" ></history>
    </div>
</template>
<script>
// 流程状态
const processStatus = [
    //{value: 0, label: '已撤回'},
    {value: 1, label: '待提交'},
    {value: 2, label: '处理中'},
    {value: 3, label: '已完成'},
    {value: 4, label: '已驳回'},
    //{value: 5, label: '已删除'},
]

import LoanForm from '@/views/user/workflow/apply/form/LoanForm'
import History from '@/views/user/workflow/apply/components/History'


export default {
    name: 'Leave', // 和对应路由表中配置的name值一致
    components: {LoanForm, History},

    data() {
        return {
            pngDialogVisible: false,
            url: '',
            currentPage: 1,  //当前页
            pageSize: 10,  //单页记录条数
            total:0, //总记录条数

            processStatus, // 流程状态
            list: [
              {

              }
            ],
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            query: {}, // 查询条件
            operate: '新增', // 操作标识：新增，编辑，详情
            formVisible: false, // 显示隐藏业务表单
            row: {}, //点击的行数据

            definitionId: null, // 流程定义id
            processInstanceId: null, // 流程图
        }
    },

    created() {
        this.getData()
    },

    methods: {
        // 分页条件查询列表
        getData() {
            let vm = this;
            this.axios({
                url: '/myapi/loan/list/',
                method: 'post',
                data: {
                    "current": vm.currentPage,
                    "size": vm.pageSize,
                    "title": vm.query.title,
                    "status": vm.query.status
                }
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.list = response.data.data.data.records;
                    vm.total = response.data.data.data.total;
                }
            });
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            console.log(this.pageSize);
            this.getData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            console.log(this.currentPage);
            this.getData();
        },

        // 点击显示表单
        clickShowForm(operate, row = {}) {
            this.operate = operate
            this.row = row
            this.formVisible = true
        },
        // 关闭表单
        closeForm(refresh) {
            // 清空点击数据
            this.row = {}
            // 隐藏
            this.formVisible = false
            // 刷新列表
            if(refresh) {
                this.getData()
            }
        },
        // 显示流程图
        showPic() {
            console.log(this.$route.name);
            let key = this.$route.name;
            let vm = this;
            vm.url = '/myapi/process/export/'+key;
            vm.pngDialogVisible = true;
        },
        // 提交申请，启动流程实例
        clickSubmitApply(row) {
            console.log(row.id);
            let vm = this;
            this.axios({
                url: '/myapi/instance/start',
                method: 'post',
                data: {
                    "processKey": vm.$route.name,
                    "businessKey": row.id,
                }
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.$message.success("提交成功");
                    vm.getData();
                }
            });
        },
        // 点击审批进度
        clickProcessHistory(row) {
            this.row = row
            this.$refs.historyRef.visible = true
        },
        // 条件查询方法
        queryData() {
            this.currentPage = 1
            this.getData()
        },
        // 刷新重置
        reload() {
            this.query = {}
            this.getData()
        },
    }
}
</script>
